<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>病房统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <script src="../js/echarts.min.js"></script>
    <style>
        #bvtbusers{
            width: 80%;
            height: 450px;
        }
    </style>

</head>
<body style="text-align: center">
<style>
    .form{
        margin-top: 30px;
        margin-left:80px;
    }
    .left{
        margin-right: 200px;
    }
</style>

<!--<form class="layui-form layui-form-pane form" action="">-->

<div class="layui-form demoTable form">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围：</label>
            <div class="layui-input-inline">
                <input type="date" class="layui-input" name="beginTime" id="beginTime">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">-</label>
            <div class="layui-input-inline">
                <input type="date" class="layui-input" name="endTime" id="endTime">
            </div>
        </div><br>
    </div>
    <div class="layui-form-item left">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" data-type="reload">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="reset" class="layui-btn layui-btn-primary">清空条件</button>
        </div>
    </div>


</div>
<!--</form>-->

<table class="layui-hide" id="doctor" lay-filter="user"></table>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 2px;">
    <legend>数据概览</legend>
</fieldset>
<div id="bvtbusers" lay-filter="test"></div>

<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery-1.12.2.min.js"></script>

<script>
    layui.use(["form","table","layer","jquery","laydate"], function(){
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            $ = layui.jquery,
        laydate = layui.laydate;

        //方法级渲染
        table.render({
            elem: "#doctor"
            ,url: "/hospital/find/enter.do"
            ,method:"post"
            ,cols: [[
                {field:'departName', title: '科室名称', width:180}
                ,{field:'enNumber', title: '累计入院', width:180}
                ,{field:'outNumber', title: '累计出院', width:100}
                ,{field:'proportion', title: '出院比(%)', width:250}

            ]]
            ,id: 'testReload'
            ,page: true
        });

        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        id:$("#id").val(),
                        name: $("#name").val(),
                        beginTime:$("#beginTime").val(),
                        endTime:$("#endTime").val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    var echarts1 = echarts.init(document.getElementById("bvtbusers"));
    var option1={
        title: {
            text: '各科室人数',
            link:"http://www.baidu.com"
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['科室人数']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} '
            }
        },
        series: [
            {
                name: '科室人数',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
            }
        ]
    }
    echarts1.setOption(option1);
</script>
<script>
    $.ajax({
        url:'/hospital/doctor/selectInHospitalUser.do',
        method:'get',
        success:function(r){
            console.log(r);
            option1.xAxis.data = r.departNames;
            option1.series[0].data=r.userNumbers;
            echarts1.setOption(option1);
        }
    })
</script>

</body>
</html>